<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="../bower_components/react/react.production.min.js"></script>
    <script src="../bower_components/react/react-dom.production.min.js"></script>
    <script src="./js/prop-types.js"></script>
    <!--将JSX语法 转换成javascript语法 -->
    <script src="../bower_components/babel/browser.min.js"></script>
    <script src="../bower_components/jquery/dist/jquery.js"></script>

    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<body>
<div id="example"></div>

<script type="text/babel">
    // todo 通过父组件多次渲染 动态加载 li


    class TimeLoad extends React.Component{
        constructor(props){
            super(props)

        }

        father(){
            alert("this is father")
        }
        son(event){
            alert("this is son")
            event.stopPropagation(); // todo 阻止父元素 接收到 子元素的事件
        }

        render() {
            return <div className="btn btn-default" onClick={this.father.bind(this)}>父元素按钮
                <div className="btn btn-danger" onClick={this.son.bind(this)}>子元素按钮</div>

            </div>
        }
    }


    ReactDOM.render(
        <TimeLoad />,
        document.getElementById("example")
    )

</script>
</body>

</html>